<template>
  <div>
    <login-top middle-top="登录bilbili">
      <div
        slot="right"
        style="font-size: 4vm"
        @click="$router.push('/register')">
        注册
      </div>
    </login-top>

    <login-text
      label="账号"
      style="margin: 4vw 0"
      placeholder="请输入账号"
      rule="^.{6,16}"
      @inputChange="res => model.username = res">
    </login-text>

    <login-text
      label="密码"
      placeholder="请输入密码"
      type="password"
      rule="^.{6,16}"
      @inputChange="res => model.password = res">
    </login-text>

    <login-btn
      btn-text="登录"
      @registerSubmit="registerSubmit">
    </login-btn>
  </div>
</template>

<script>
  import LoginTop from  '../components/common/LoginTop'
  import LoginText from  '../components/common/LoginText'
  import LoginBtn from  '../components/common/LoginBtn'
  export default {
    data(){
      return {
        model:{
          username:'',
          password:'',
        }
      }
    },
    components:{
      LoginTop,
      LoginText,
      LoginBtn
    },
    methods:{
      async registerSubmit(){
        let rulg = /^.{6,16}$/
        if(rulg.test(this.model.username)&&rulg.test(this.model.password)){
          const res =  await this.$http.post('/login',this.model)
          this.$msg.fail(res.data.msg)
          if(res.data.code == 301 || res.data.code == 302){
            return
          }
          window.sessionStorage.setItem('token',res.data.token)
          window.sessionStorage.setItem('id',res.data.id)
          setTimeout(() => {
            this.$router.push('/userinfo')
          },1000)
        }else{
          this.$msg.fail('格式不正确,请重新输入!')
        }
      }
    }
  }
</script>

<style scoped>

</style>
